<template>
  <div>
    <!-- 1.0 标题 -->
    <Header :info="list" />
    <!-- 2.0 内容-->
    <el-card><Echarts @infoSon="fn"></Echarts> </el-card>
  </div>
</template>

<script>
import Header from './component/index.vue'
import Echarts from './component/echarts.vue'
import { totaldata } from '../../api/list'
export default {
  components: {
    Header,
    Echarts
  },
  data() {
    return {
      list: [
        {
          id: 1,
          icon: 'icon-icon-',
          text: '总订单',
          pice: '102400',
          name: 'totalOrder',
          color: 'red'
        },
        {
          id: 2,
          icon: 'icon-Dollar',
          text: '总金额',
          pice: '102400',
          name: 'totalAmount',
          color: 'green'
        },
        {
          id: 3,
          icon: 'icon-wenjian',
          text: '今日订单数',
          pice: '102400',
          name: 'todayOrder',
          color: 'pink'
        },
        {
          id: 4,
          icon: 'icon-renwu',
          text: '今日销售额',
          pice: '102400',
          name: 'totayAmount',
          color: 'yellow'
        }
      ],
      chartData: {}
    }
  },
  created() {
    this.chart()
  },
  methods: {
    async chart() {
      const data = await totaldata()
      // console.log(data)
      /* 高端的写法，你看懂了没 */
      this.list.forEach(item => {
        if (data[item.name]) {
          item.pice = data[item.name]
        }
        // console.log(item.pice)
      })
      const { myChart, option } = this.chartData
      // x轴
      option.xAxis.data = data.xData
      // 折线的数据
      option.series[0].data = data.orderData
      option.series[1].data = data.amountData
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    fn(obj) {
      this.chartData = obj
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
</style>
